<template>
    <div class="asset-processing-form">
      <div class="form-section">
        <div class="form-group">
          <label for="initiateTime">发起时间:</label>
          <input type="date" id="initiateTime" v-model="form.initiateTime">
        </div>
        <div class="form-group">
          <label for="processingFee">处理费用:</label>
          <input type="text" id="processingFee" v-model="form.processingFee">
        </div>
        <div class="form-group">
          <label for="processingType">处理类型:</label>
          <select id="processingType" v-model="form.processingType">
            <option value="资产报废">资产报废</option>
            <option value="资产报失">资产报失</option>
         
          </select>
        </div>
        <div class="form-group">
          <label for="processingReason">处理原因:</label>
          <textarea id="processingReason" v-model="form.processingReason" maxlength="50"></textarea>
          <div class="char-count">{{ form.processingReason.length }} / 50</div>
        </div>
      </div>
  
      <div class="form-section">
        <div class="form-group">
          <label for="assetList">资产列表:</label>
          <table id="assetList">
            <thead>
              <tr>
                <th>资产编码</th>
                <th>资产分类</th>
                <th>资产名称</th>
                <th>品牌</th>
                <th>型号</th>
                <th>所在位置</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(asset, index) in form.assetList" :key="index">
                <td>{{ asset.code }}</td>
                <td>{{ asset.category }}</td>
                <td>{{ asset.name }}</td>
                <td>{{ asset.brand }}</td>
                <td>{{ asset.model }}</td>
                <td>{{ asset.location }}</td>
                <td>
                
                  <button @click="removeAsset(index)">删除</button>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="7">
                  <button @click="addAsset">添加资产</button>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
  
      <div class="form-actions">
        <button @click="cancel">取消</button>
        <button @click="saveDraft">保存草稿</button>
        <button @click="submitForm">提交</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          initiateTime: '2024-08-19',
          processingFee: '',
          processingType: '资产报废',
          processingReason: '',
          assetList: [
      
            {
              code: 'ZC-00001',
              category: '笔记本',
              name: '联想ThinkPad',
              brand: '联想',
              model: 'X1 Carbon',
              location: '办公室'
            }
          ]
        }
      };
    },
    methods: {
      addAsset() {
    
        this.form.assetList.push({
          code: '',
          category: '',
          name: '',
          brand: '',
          model: '',
          location: ''
        });
      },
      removeAsset(index) {
       
        this.form.assetList.splice(index, 1);
      },
      cancel() {
      
        alert('取消操作');
      },
      saveDraft() {
       
        alert('草稿已保存');
      },
      submitForm() {
    
        alert('表单已提交');
      }
    }
  };
  </script>
  
  <style scoped>
  .asset-processing-form {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .form-section {
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input[type="date"],
  .form-group input[type="text"],
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .char-count {
    margin-top: 5px;
    font-size: 0.8em;
    color: #888;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  table th,
  table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  
  table th {
    background-color: #f2f2f2;
  }
  
  table td button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
  
  table td button:hover {
    background-color: #0056b3;
  }
  
  .form-actions {
    text-align: right;
  }
  
  .form-actions button {
    margin-left: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
  
  .form-actions button:hover {
    background-color: #0056b3;
  }
  </style>
  